<template>
  <view
    style="
      font-size: 30rpx;
      font-weight: 700;
      margin-left: 20rpx;
      margin-top: 16rpx;
    "
    >我的订单</view
  >
  <view class="scroll-box ss-order-menu-wrap ss-flex ss-col-center">
    <!-- <scroll-view scroll-x class="index-nav-scroll">
      <radio-group> -->
    <view
      @tap="sheep.$router.go(item.path, { type: item.value })"
      v-for="item in orderMap"
      :key="item.title"
      class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center index-nav-view"
    >
      <uni-badge
        class="uni-badge-left-margin"
        :text="numData[item.type]"
        absolute="rightTop"
        size="small"
      >
        <image
          class="item-icon"
          :src="sheep.$url.cdn(item.icon)"
          mode="aspectFit"
        ></image>
      </uni-badge>
      <view class="menu-title">{{ item.title }}</view>
    </view>
    <!-- </radio-group>
    </scroll-view> -->
  </view>
</template>

<script setup>
/**
 * 装修组件 - 订单菜单组
 */
import sheep from "@/sheep";
import { computed } from "vue";

const orderMap = [
  {
    title: "待付款",
    value: "1",
    icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/待付款.png",
    path: "/pages/order/list",
    type: "unpaid",
  },
  {
    title: "待发货",
    value: "2",
    icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/待发货.png",
    path: "/pages/order/list",
    type: "nosend",
  },
  {
    title: "待收货",
    value: "3",
    icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/待收货.png",
    path: "/pages/order/list",
    type: "noget",
  },
  // {
  //   title: '待评价',
  //   value: '4',
  //   icon: '/static/img/shop/order/no_comment.png',
  //   path: '/pages/order/list',
  //   type: 'nocomment',
  // },
  {
    title: "售后单",
    value: "4",
    icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/售后单.png",
    path: "/pages/order/list",
    type: "aftersale",
  },
  {
    title: "全部订单",
    value: "0",
    icon: "https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/订单.png",
    path: "/pages/order/list",
  },
  // {
  //   title: "电影订单",
  //   value: "0",
  //   icon: "https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/05/806cda87c71a405eadfa0f22795b1037.png",
  //   path: "/pages/movie/my-ticket",
  // },
];

const numData = computed(() => sheep.$store("user").numData);
</script>

<style lang="scss" scoped>
.scroll-box {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 10rpx;
}
.index-nav-scroll {
  width: 100%;
}
/* 公共样式 */
.index-nav-view {
  display: inline-block;
  width: 22%;
  text-align: center;
  padding-top: 20rpx;
}

.ss-order-menu-wrap {
  .menu-item {
    height: 120rpx;
    position: relative;
    z-index: 10;
    .menu-title {
      font-size: 22rpx;
      line-height: 24rpx;
      color: #333333;
      margin-top: 10rpx;
    }
    .item-icon {
      width: 54rpx;
      height: 54rpx;
    }
    .num-icon {
      position: absolute;
      right: 18rpx;
      top: 18rpx;
      // width: 40rpx;
      padding: 0 8rpx;
      height: 26rpx;
      background: #ff4d4f;
      border-radius: 13rpx;
      color: #fefefe;
      display: flex;
      align-items: center;
      .num {
        font-size: 24rpx;
        transform: scale(0.8);
      }
    }
  }
}
</style>
